<template>
  <div>
    <div class="num-box">
      <div>
        <p class="title">数据总条数</p>
        <p class="num"><span>{{ dataList.dataTotalCount }}</span>亿条</p>
      </div>
      <div>
        <p class="title">日增数据条数</p>
        <p class="num"><span>{{ (dataList.dailyIncrease/100).toFixed(0) }}</span>条</p>
      </div>
      <div>
        <p class="title">月增数据条数</p>
        <p class="num"><span>{{ dataList.monthIncrease }}</span>万条</p>
      </div>
    </div>
    <div class="content">
      <pieChart/>
      <div class="right">
        <div>
          <p>采集任务成功率: <span>{{ dataList.taskSuccessRate }}%</span></p>
        </div>
        <div>
          <p>采集失败任务数: <span>{{ dataList.failedTaskCount }}</span></p>
        </div>
        <div>
          <p>实时任务数量: <span>{{ dataList.realTimeTaskCount }}</span></p>
        </div>
        <div>
          <p>日增数据条数: <span>{{ (dataList.dailyIncrease/200).toFixed(0) }}</span></p>
        </div>
      </div>
    </div>
    <Dialog :arrList="arrList" :fathUrl="fathUrl" :visible="bslwsVisible" dataChange="4" @close="bslwsVisible = false" :title="name">
    </Dialog>
  </div>
</template>

<script setup>
import pieChart from './charts/pie1.vue';
import {
  GETtaskSuccessRate,
  GETtaskFailCount,
  GETrealTimeTaskCount,
  GETentriesTotal,
  GETentriesNumDay,
  GETentriesNumMonth,
} from '../../../api/index'
import {ref, reactive, onMounted} from 'vue';
import Dialog from '../../../components/right/components/Dialog.vue';
const bslwsVisible = ref(false);
const name = ref('')
const fathUrl = ref('')
const arrList = ref([])
const formData = (val) => {
  bslwsVisible.value = true
  name.value = val
  arrList.value = [
    {
      prop: "name",
      label: "业务处室",
      width: "80",
    },
    {
      prop: "value",
      label: "日增记录数",
      width: "80",
    },]
   fathUrl.value = '/zjjscApi/dataTable/getdirectoriesNumberMx'
  console.log(val, 'valvalvalvalvalval');

}
let dataList = reactive({
  dataTotalCount: 0, //数据总条数
  dailyIncrease: 0, // 日增数据条数
  monthIncrease: 0, // 月增数据条数
  taskSuccessRate: 0, // 采集任务成功率
  failedTaskCount: 0, // 采集失败任务数
  realTimeTaskCount: 0, // 实时任务数量
})

function initData() {
  //数据总条数
  GETentriesTotal().then(res => {
    dataList.dataTotalCount = res.data.count || 0
    dataList.dataTotalCount=4.09
  })
  //日增数据条数
  GETentriesNumDay().then(res => {
    dataList.dailyIncrease = res.data.count || 0
  })
  //月增数据条数
  GETentriesNumMonth().then(res => {
    dataList.monthIncrease = res.data.count/10000 || 0
  })
  //采集任务成功率
  GETtaskSuccessRate().then(res => {
    dataList.taskSuccessRate = res.data.count || 0
  })
  //采集任务失败数
  GETtaskFailCount().then(res => {
    dataList.failedTaskCount = res.data.count || 0
  })
  //实时采集任务数
  GETrealTimeTaskCount().then(res => {
    dataList.realTimeTaskCount = res.data.count || 0
  })
}

onMounted(() => {
  initData()
})

</script>

<style scoped lang="scss">
p {
  padding: 0;
  margin: 0;
}

.num-box {
  display: flex;
  justify-content: space-between;

  > div {
    width: 33%;
    text-align: center;

    .title {
      color: #CFEAFF;
      font-size: 12px;
    }

    .num {
      color: #37C9C9;
      font-size: 12px;
      width: 110px;
      span {
        margin-right: 5px;
        font-size: 16px;
        font-weight: bold;
      }
    }
  }

}

.content {
  display: flex;

  .right {
    font-size: 12px;

    > div {
      width: 120px;
      height: 28px;
      padding: 2px 10px;
      margin-bottom: 10px;
      line-height: 28px;
      border-radius: 4px;
      background-color: rgba(11, 44, 106, 0.8);

      span {
        color: #37C9C9;
      }
    }
  }
}
</style>
